<template>
    <el-button type="primary" @click="dialogForm">新增权限</el-button>
<el-table :data="PermissionData" style="width: 100%">
   <el-table-column prop="permissionId" label="权限编号" width="100" />
   <el-table-column prop="permissionName" label="权限名称" width="100" />
   <el-table-column prop="parentName" label="父级权限名称" width="100" />
   <el-table-column prop="path" label="path" width="100" />
   <el-table-column prop="name" label="name" width="100" />
   <el-table-column prop="component" label="component" width="150"/>
   <el-table-column  label="操作" >
    <template #default="{row}">
      <el-button type="danger" @click="delPermission(row.permissionId)">删除</el-button>
      <el-button type="warning" @click="dialogUpForm(row.permissionId)">编辑</el-button>
    </template>
    </el-table-column>
 </el-table>

  <table>
    <tr>
      <td>
        <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 5]"
      :background="true"
      layout="slot, sizes"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    共{{ page.totalCount }}条，每页{{ page.PageSize }}条，
    当前第{{ page.PageIndex }}/{{ page.totalPage }}页
    </el-pagination>
      </td>
      <td>
        <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 5]"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    >
    <el-button type="primary" @click="handleCurrentChange(1)" :disabled="page.PageIndex==1">首页</el-button>
    </el-pagination>
      </td>
      <td>
        <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 5]"
      :background="true"
      layout="slot, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button type="primary" @click="handleCurrentChange(page.totalPage)" :disabled="page.PageIndex==page.totalPage">尾页</el-button>
    </el-pagination>
      </td>
    </tr>
  </table>
  <!-- 新增权限 -->
  <el-dialog v-model="dialogFormVisible" title="新增权限" width="500">
    <el-form :model="form">
      <el-form-item label="权限名称" :label-width="formLabelWidth">
        <el-input v-model="form.permissionName" />
      </el-form-item>
      <el-form-item label="父级权限" :label-width="formLabelWidth">
        <el-select v-model="form.parentId" placeholder="请选择" clearable>
          <el-option v-for="item in PermissionData" :label="item.permissionName" :value="item.permissionId" />
        </el-select>
      </el-form-item>
      <el-form-item label="path" :label-width="formLabelWidth">
        <el-input v-model="form.path" />
      </el-form-item>
      <el-form-item label="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="component" :label-width="formLabelWidth">
        <el-input v-model="form.component"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addPermission">
          新增
        </el-button>
      </div>
    </template>
  </el-dialog>

    <!-- 编辑权限 -->
    <el-dialog v-model="dialogUpFormVisible" title="编辑权限" width="500">
    <el-form :model="upform">
      <el-form-item label="权限名称" :label-width="formLabelWidth">
        <el-input v-model="upform.permissionName" />
      </el-form-item>
      <el-form-item label="path" :label-width="formLabelWidth">
        <el-input v-model="upform.path" />
      </el-form-item>
      <el-form-item label="name" :label-width="formLabelWidth">
        <el-input v-model="upform.name" />
      </el-form-item>
      <el-form-item label="component" :label-width="formLabelWidth">
        <el-input v-model="upform.component"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upPermission">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import { useCounterStore } from '@/stores/counter';
const useStore=useCounterStore();
import { useRouter } from 'vue-router';
const router = useRouter();
import { api1, api2 } from '@/main';
//@ts-ignore
import Cookies from 'js-cookie'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const dialogUpFormVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  permissionName: "",
  parentId: 0,
  path: "",
  name: "",
  component: ""
})
const dialogForm=()=>{
  dialogFormVisible.value=true;
  form.permissionName="";
  form.parentId=0;
  form.path="";
  form.name="";
  form.component="";
}
const addPermission=()=>{
  api2.post('/api/User/InsertPermission',form)
  .then(res=>{
    if(res.data.isSuc)
    {
      ElMessage.success(res.data.msg);
      dialogFormVisible.value=false;
      loadData();
    }
    else
    {
      ElMessage.error(res.data.msg);
      dialogFormVisible.value=false;
    }
  })
}
const delPermission=(permissionId:number)=>{
  ElMessageBox.confirm(
    '确定删除该权限?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      api2.delete('/api/User/DeletePermission?id='+permissionId)
  .then(res=>{
     if(res.data.isSuc)
     {
       ElMessage.success(res.data.msg);
       loadData();
     }
     else
     {
       ElMessage.error(res.data.msg);
     }
  })
    })
}
const upform=ref({
  permissionId: 0,
  permissionName: "",
  path: "",
  name: "",
  component: ""
})
const dialogUpForm=(PermissionId:number)=>{
  useStore.PermissionId=PermissionId;
  dialogUpFormVisible.value=true;
  api1.get('/api/User/BackPermission',{
    params:{
      PermissionId:PermissionId
    }
  })
  .then(res=>{
    upform.value=res.data.data;
  })

}
const upPermission=()=>{
  upform.value.permissionId=useStore.PermissionId;
  api2.put('/api/User/UpdatePermission',upform.value)
  .then(res=>{
    if(res.data.isSuc)
    {
      ElMessage.success(res.data.msg);
      dialogUpFormVisible.value=false;
      upform.value.permissionId=0;
      upform.value.permissionName="";
      upform.value.path="";
      upform.value.name="";
      upform.value.component="";
      loadData();
    }
    else
    {
      ElMessage.error(res.data.msg);
      dialogUpFormVisible.value=false;
      upform.value.permissionId=0;
      upform.value.permissionName="";
      upform.value.path="";
      upform.value.name="";
      upform.value.component="";
    }
  })
}


interface Permission{
  permissionId: number,
  permissionName: string,
  parentId: number,
  parentName: string,
  path: string,
  name: string,
  component: string
}
const PermissionData=ref<Permission[]>([]);
const page=reactive({
  PageIndex:1,
  PageSize:5,
  totalCount:0,
  totalPage:0
})

onMounted(()=>{
  loadData();
})
const loadData=()=>{
  api1.get('/api/User/GetPermissionList',{
    params:{
      PageIndex:page.PageIndex,
      PageSize:page.PageSize
    }
  })
  .then(res=>{
    PermissionData.value=res.data.data.data;
    page.totalCount=res.data.data.totalCount;
    page.totalPage=res.data.data.totalPage;
  })
}
const handleSizeChange = (val: number) => {
  page.PageSize=val;
  loadData();
}

const handleCurrentChange = (val: number) => {
  page.PageIndex=val;
  loadData();
}

</script>
